import React, { useState } from 'react'
import { Button, View } from 'react-native'
import InfoView from './InfoView'
import { avatarUri } from '../../constants/Uri';
import ConsumeList from './ConsumeList';


/* 
React.memo 作用
- 避免重复渲染
  - React.memo 包裹组件， 并设置重绘的条件
- 避免重复创建对象
  - useMemo 缓存数据
  - useMemo 缓存UI渲染
  - useCallback 缓存回调函数
*/



export default function MemoView() {

  const [info, setInfo] = useState<UserInfo>({
    avatar: '',
    name: '',
    desc: ''
  });

  const changeInfo = () => {
    setInfo({
      avatar: avatarUri,
      name: 'ts',
      desc: 'this is react-native'
    });
  }
  return (
    <View style={{ width: '100%' }}>

      {/* <Button
        title='click me '
        onPress={changeInfo}
      />
      <InfoView info={info} /> */}
      <ConsumeList/>
    </View>
  )
}
